<template>
  <div ref="bar" style="width:100%; height:100%;"></div>
</template>

<script>
import * as echarts from "echarts";
    export default {
        name: "",
        props: {// 接受父组件的值
          seriesData:{
            type:Array,
          },
        },
        data(){
            return{
              chart: null,
              seriesData1: [],

            }
        },
        watch: {
          seriesData: {
            handler(val, old) {
              this.seriesData1 = this.seriesData;
              this.initChart();
              //console.log(val+"监听数据");
            },
            deep: true,
          },
        },
        mounted() {
          setTimeout(() => {
            this.$nextTick(() => {
              this.initChart();
            });
          }, 500);

        },
        created() {
          this.seriesData1 = this.seriesData;
        },
        methods:{
          initChart(){
            let ref = this.$refs.bar;
            //console.log(this.seriesData1)

            let xAxisData = this.seriesData1.map((it) => {
              return it.deptName;
            }).reverse();
            //console.log(xAxisData)
            let yAxisData = this.seriesData1.map((it) => {
              return it.je;
            }).reverse();
            //console.log(yAxisData)
            if (ref && ref !== undefined) {
              this.chart = echarts.init(ref);
              this.chart.setOption(
                {
                backgroundColor:"#FFFFFF",
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  },
                  backgroundColor: 'rgba(9, 24, 48, 0.5)',
                  borderColor: 'rgba(75, 253, 238, 0.4)',
                  textStyle: {
                    color: '#CFE3FC',
                  },
                  borderWidth: 1,
                },
                grid: {
                  top: '15%',
                  right: '5%',
                  left: "8%",
                  bottom: '12%'
                },
                xAxis: [{
                  name: "部门",
                  type: 'category',
                  data: xAxisData,
                  axisLine: {
                    lineStyle: {
                      color: '#000000'
                    }
                  },
                  axisLabel: {
                    margin: 10,
                    color: '#707B7C',
                    textStyle: {
                      fontSize: 12
                    },
                  },
                  axisTick: {
                    show: false
                  }
                }],
                yAxis: [{
                  name: "奖金总额（元）",
                  axisLabel: {
                    formatter: '{value}',
                    color: '#707B7C',
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: '#000000'
                    }
                  },
                  splitLine: {
                    lineStyle: {
                      color: 'rgba(255,255,255,0.12)'
                    }
                  }
                }],
                series: [{
                  type: 'bar',
                  data: yAxisData,
                  barWidth: '15%',
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 191, 255)' // 0% 处的颜色
                      }, {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                      }], false),
                      shadowColor: 'rgba(0,160,221,1)',
                      shadowBlur: 4,
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      lineHeight: 10,
                      formatter: '{c}',
                      position: 'top',
                      textStyle: {
                        color: '#00D6F9',
                        fontSize: 12
                      }

                    }
                  }
                }]

                },
                true
              );

            }
          },
        },
    };
</script>

<style scoped>
/deep/[data-v-37c029ad] .el-form-item--small.el-form-item{margin-top: 0!important;}
/deep/.el-avatar{background: #fff!important;display: flex;justify-content: center}
.userBoxShadow{
  border: 4px solid #fff;
  -webkit-box-shadow: 5px 0px 10px rgba(150, 150, 192, 0.5);
  box-shadow: 5px 0px 10px rgba(150, 150, 192, 0.5);
  margin-right: 25px;border-radius: 50%;
}
</style>
